<template>
  <div class="app-container">

    <u-page title="餐费管理">
      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="充值年月">
            <el-date-picker
              v-model="listQuery.yearMonth"
              type="month"
              placeholder="年月"
              value-format="yyyyMM"
              clearable
            />
          </el-form-item>
          <el-form-item label="归属年月">
            <el-date-picker
              v-model="listQuery.belongsYearMonth"
              type="month"
              placeholder="年月"
              value-format="yyyyMM"
              clearable
            />
          </el-form-item>
          <el-form-item label="部门" prop="dept">
            <el-input v-model="listQuery.dept" placeholder="部门" clearable />
          </el-form-item>
          <el-form-item label="订单号" prop="orderNo">
            <el-input v-model="listQuery.orderNo" placeholder="订单号" clearable />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="listQuery.status" placeholder="请选择状态" class="status" clearable>
              <el-option value="" label="全部" />
              <el-option :value="0" label="充值中" />
              <el-option :value="1" label="已完成" />
              <el-option :value="2" label="充值失败" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-download" @click="hdlExport">导出</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleView(row)">查看详细</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-page>

    <detail v-model="dialogDetailVisible" :data="detailQuery" />

  </div>
</template>

<script>

import detail from './components/detail'
export default {
  components: {
    detail
  },
  data() {
    return {
      api: this.$u.api.PluginsGuideMeal,
      // 表格
      columns: [
        {
          prop: 'type',
          label: '类型',
          render: (h, params) => {
            const { type } = params.row
            return h('el-tag', type === 0? '批量充值': '单人充值' )
          }
        },
        {
          prop: 'dept',
          label: '部门',
          render: (h, params) => {
            if(params.row.dept){
              return h('el-tag', params.row.dept)
            }
          }
        },
        {
          prop: 'orderNo',
          label: '订单号'
        },
        {
          prop: 'yearMonth',
          label: '充值年月'
        },
        {
          prop: 'belongsYearMonth',
          label: '归属年月'
        },
        {
          prop: 'totalFee',
          label: '充值总金额'
        },
        {
          prop: 'deductionId',
          label: '商友扣款单据'
        },
        {
          prop: 'status',
          label: '状态',
          render: (h, params) => {
            const { status } = params.row
            if (status === 0) {
              return h('el-tag', { props: { type: 'info' }}, '充值中')
            } else if (status === 1) {
              return h('el-tag', { props: { type: '' }}, '已完成')
            } else if (status === 2) {
              return h('el-tag', { props: { type: 'danger' }}, '充值失败')
            }
          }
        },
        {
          prop: 'createTime',
          label: '充值时间'
        }
      ],

      list: [],
      listLoading: false,
      listOptions: {
        stripe: true // boolean 斑马纹
      },
      merchantQuery: {},
      inputDateTimeRange: [],
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        yearMonth: ''
      },
      dialogStatus: '',
      dataForm: {},
      newForm: {
        disabled: true
      },
      // 删除选中数据
      selectData: [],
      active: 'first',

      // 查看详细
      dialogDetailVisible: false,
      detailQuery: {},
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    handleView(row) {
      this.detailQuery = row
      this.dialogDetailVisible = true
    }
  }
}

</script>

<style scoped>

</style>
